<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .box {
            width: 900px;
            height: 400px;
            display: flex;
            justify-content: space-around;
            margin: 20px auto;
        }
        .left {
            width: 400px;
            height: 400px;
            border: 1px solid red;
            position: relative;
        }
        .left img {
            height: 100%;
            width: 100%;
        }
        .right {
            width: 400px;
            height: 400px;
            overflow: hidden;
            border: 1px solid red;
            display: none;
            position: relative;
        }
        .meng {
            width: 200px;
            height: 200px;
            z-index: 1;
            background-color: #ccccccb4;
            position: absolute;
            display: none;
        }
        .right img {
            position: absolute;
            width: 800px;
            height: 800px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">
            <img src="./u=3427771031,3349824403&fm=253&app=138&f=JPEG.jpg">
            <div class="meng"></div>
        </div>
        <div class="right">
            <img src="./u=3427771031,3349824403&fm=253&app=138&f=JPEG.jpg">
        </div>

        <script>
            const left = document.querySelector(".left")
            const right = document.querySelector(".right")
            const meng = document.querySelector(".meng")
            const img = document.querySelector(".right img")
            
            

            left.onmouseover = function() {
                meng.style.display = "block"
                right.style.display = "block"
            }

            left.onmousemove = function (e) {
                const leftBoxWidth = left.clientWidth   //左侧盒子宽度
                const leftBoxHeight = left.clientHeight //左侧盒子高度
                const mengWidth = meng.clientWidth   //蒙版盒子宽度
                const mengHeight = meng.clientHeight //蒙版盒子高度
                const leftBoxLeft = left.offsetLeft //左侧盒子距离页面左边界的值
                const leftBoxTop = left.offsetTop   //左侧盒子距离页面上边界的值
                const MaxL = leftBoxWidth - mengWidth   //横向最大能移动的距离
                const MaxT = leftBoxHeight - mengHeight   //横向最大能移动的距离
                mengMoveLeft = e.pageX - leftBoxLeft - Math.floor(mengWidth / 2) //蒙版横向移动距离
                mengMoveTop = e.pageY - leftBoxTop - Math.floor(mengHeight / 2) //蒙版纵向移动距离
                moveX = mengMoveLeft < 0 ? 0 : (mengMoveLeft > MaxL ? MaxL : mengMoveLeft) //蒙版可移动距离
                moveY = mengMoveTop < 0 ? 0 : (mengMoveTop > MaxT ? MaxT : mengMoveTop) //蒙版可移动距离
                meng.style.left = `${moveX}px`
                meng.style.top = `${moveY}px`
                n = moveX / MaxL
                m = moveY / MaxT

                img.style.left = - (img.clientWidth - right.clientWidth) * n + "px"
                img.style.top = - (img.clientHeight - right.clientHeight) * m +  "px"
                
            }

            left.onmouseout = function() {
                meng.style.display = "none"
                right.style.display = "none"
            }

        </script>
    </div>
</body>
</html>